<!DOCTYPE html>
<html>
	<head>
		 <meta charset="utf-8">
		    <meta http-equiv="X-UA-Compatible" content="IE=edge">
		    <meta name="viewport" content="width=device-width, initial-scale=1">
		<title>导航菜单</title>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	 <style>
	
		*{
			margin:0;
			padding:0;
		}
	
		body{
			font:15px/1.3 'Open Sans', sans-serif;
			color: #5e5b64;
			text-align:center;
		}
	
		a, a:visited {
			outline:none;
			color:#389dc1;
		}
	
		a:hover{
			text-decoration:none;
		}
	
		section, footer, header, aside, nav{
			display: block;
		}
	
		nav{
			display:inline-block;
			margin:60px auto 45px;
			background-color:#5597b4;
			box-shadow:0 1px 1px #ccc;
			border-radius:2px;
		}
	
		nav a{
			display:inline-block;
			padding: 18px 30px;
			color:#fff !important;
			font-weight:bold;
			font-size:16px;
			text-decoration:none !important;
			line-height:1;
			text-transform: uppercase;
			background-color:transparent;
	
			-webkit-transition:background-color 0.25s;
			-moz-transition:background-color 0.25s;
			transition:background-color 0.25s;
		}
	
		nav a:first-child{
			border-radius:2px 0 0 2px;
		}
	
		nav a:last-child{
			border-radius:0 2px 2px 0;
		}
	
		nav.home .home,
		nav.projects .projects,
		nav.services .services,
		nav.contact .contact{
			background-color:#e35885;
		}
	
		p{
			font-size:22px;
			font-weight:bold;
			color:#7d9098;
		}
	
		p b{
			color:#ffffff;
			display:inline-block;
			padding:5px 10px;
			background-color:#c4d7e0;
			border-radius:2px;
			text-transform:uppercase;
			font-size:18px;
		}
	
	    </style>
	
	</head>
	<body>
      <div id="main">
      
      	<!-- 激活的菜单样式为  active 类 -->
      	<!-- 为了阻止链接在点击时跳转，我们使用了 "prevent" 修饰符 (preventDefault 的简称)。 -->
      
      	<nav v-bind:class="active" v-on:click.prevent>
      
      		<!-- 当菜单上的链接被点击时，我们调用了 makeActive 方法, 该方法在 Vue 实例中创建。 -->
      
      		<a href="#" class="home" v-on:click="makeActive('home')">首页</a>
      		<a href="#" class="projects" v-on:click="makeActive('projects')">展示</a>
      		<a href="#" class="services" v-on:click="makeActive('services')">分析</a>
      		<a href="#" class="contact" v-on:click="makeActive('contact')">管理</a>
			<a href="#" class="cont" v-on:click="makeActive('cont')">用户管理</a>
      	</nav>
      
       	<!-- 以下 "active" 变量会根据当前选中的值来自动变换 -->
      
      	<p>您选择了 <b>{{active}} 菜单</b></p>
      </div>
      
      <script>
      // 创建一个新的 Vue 实例
      var demo = new Vue({
      	// DOM 元素，挂载视图模型
      	el: '#main',
      
      	// 定义属性，并设置初始值
      	data: {
      		active: 'home'
      	},
      
      	// 点击菜单使用的函数
      	methods: {
      		makeActive: function(item){
      			// 模型改变，视图会自动更新
      			this.active = item;
      		}
      	}
      });
      </script>
    </body>
</html>